<template>
    <el-form ref="ruleFormRef" :model="ruleForm" class="p15">
        <el-descriptions border :column="2" label-width="120">
            <el-descriptions-item :span=2 label="项目名称">{{ ruleForm.project.title }}</el-descriptions-item>
            <el-descriptions-item :span=2 label="商品名称"><el-text>{{ ruleForm.title }}</el-text></el-descriptions-item>
            <el-descriptions-item label="单位　　"><el-text>{{ ruleForm.unit }}</el-text></el-descriptions-item>
            <el-descriptions-item label="规格　　"><el-text>{{ ruleForm.specs }}</el-text></el-descriptions-item>
            <el-descriptions-item label="品牌　　"><el-text>{{ ruleForm.brand }}</el-text></el-descriptions-item>
            <el-descriptions-item label="金额　　"><el-text>{{ ruleForm.price }}</el-text></el-descriptions-item>
            <el-descriptions-item label="数量　　"><el-text>{{ ruleForm.sums }}</el-text></el-descriptions-item>
            <el-descriptions-item label="类型　　"><el-text>{{ ruleForm.type }}</el-text></el-descriptions-item>
            <el-descriptions-item label="备注　　"><el-text>{{ ruleForm.remarks }}</el-text></el-descriptions-item>
        </el-descriptions>
        <el-table class="mt20" :data="tableData" border style="width: 100%;font-size: 16px;height: auto !important;">
            <el-table-column type="index" :index="indexMethod" label="序号" width="70" align="center" />
            <el-table-column prop="title" label="商品名称" show-overflow-tooltip align="center" />
            <el-table-column prop="specs" label="规格" show-overflow-tooltip align="center" />
            <el-table-column prop="unit" label="单位" show-overflow-tooltip align="center" />
            <el-table-column prop="sums" label="数量" show-overflow-tooltip align="center" />
            <el-table-column prop="price" label="单价" show-overflow-tooltip align="center" />
            <el-table-column prop="unit" label="合计" show-overflow-tooltip align="center" />
            <el-table-column prop="labor" label="申请班组（签字）" show-overflow-tooltip align="center" />
            <el-table-column prop="batch" label="备注（采购批次）" show-overflow-tooltip align="center" />
        </el-table>
        <div>
            <p>备注：1.班组长需要主材提前7~15工作日上报；辅助材料提前：3~7个工作日上报公司；</p>
            <p>　　　2.材料采购项目部必需审核；因错采、多采购造成损失班组、项目部各承担50%费用；</p>
            <p>　　　3.采购数量及批次要和前期采购计划吻合，避免运输费、搬运费增加；</p>
            <p>　　　4.材料验收由项目部和班组长共同验收；合格后项目部和班组长共同签字确认；材料由班组负责保管和维护。</p>
        </div>
        <div class="text-right">时  间： </div>
    </el-form>
    <el-dialog v-model="showFile" title="文件">
        <el-image style="width: 200px;" :src="files" />
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { ref, watch } from 'vue';
import http from '../util/request';
import { FormInstance } from 'element-plus';
const indexMethod = (index: number) => {
  return index+= 1
}

const showFile = ref<boolean>(false)

const files = ref<string>('')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<any>({project:{title:''}})
const tableData = ref<any>([])

const getData = () => {
    if(ruleForm.value.id == 0){
        return;
    }
    http.get('/material/'+ruleForm.value.id).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
            ruleForm.value.price = parseInt(ruleForm.value.price)
            getInfo()
        }
    })
}

const getInfo = () => {
    http.post('/material/details',{material_id:ruleForm.value.id}).then((response:any)=>{
        tableData.value = response.data.data
    })
}

const props = defineProps<{
    data:any
    type:boolean
}>()

watch(props,()=>{
    ruleForm.value.id = props.data
    getData()
},{ immediate: true })

</script>
<style scoped>
.contract{height: calc(100vh - 25vh);overflow-y: scroll;}
</style>
